<!DOCTYPE html>
<html lang="en">
<!-- 晚上了解  虚拟DOM 是什么？ -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 双大括号是模板语法，里面可以做简单的 js 操作，js 表达式 -->
        <p> {{ '婷姐说：' + msg }} </p>

        <!-- 通过双大括号只能渲染普通文本，无法解析 html 元素和样式 -->
        {{htmlStr}}

        <!-- 通过 v- 开头的属性被称为 vue 的指令 -->
        <!-- 该指令是用来解析标签和样式用的，注意确保内容的安全性，防止 XSS -->
        <div v-html="htmlStr"></div>

        <p>{{htmlStr}}</p>
        <!-- v-text 是一个指令，是用来渲染内容用的，不会解析标签和样式 -->
        <p v-text="htmlStr"></p>

        <!-- 属性中直接使用双大括号，无法被解析 -->
        <p title="{{title}}">具有标题的 p 标签</p>

        <!-- v-bind 是用来插入属性用的，后面引号中的内容是 js 表达式 -->
        <p v-bind:title="title">具有标题的 p 标签</p>

        <p v-bind:class="className + ' red'">具有 class 的 p 标签</p>
        <!-- 如果该元素上已经有了 class 再次插入 class 的时候会进行合并 -->
        <p v-bind:class="className" class="red">具有 class 的 p 标签 2</p>

        <!-- : 冒号是 v-bind 的简写 -->
        <p :style="styleStr">具有样式的 p 标签</p>

        <!-- v-on 是用来监听事件用的 -->
        <button v-on:click="count++">点击增加 {{count}}</button>

        <!-- @ 是 v-on 的简写 -->
        <button @click="flag = !flag">切换 flag</button>

        <!-- v-if 当条件成立的时候会显示该标签 -->
        <div v-if="flag"> flag 为真 </div>
        <!-- 在 v-if、v-else-if、v-else 中间不能有多余的标签 -->
        <!-- <br> -->
        <div v-else-if="!flag"> flag 为假 </div>
        <!-- 当前面条件都不成立的时候会显示该标签 -->
        <div v-else> flag 为不知道 </div>

        <ul>
            <!-- 列表渲染，循环渲染 -->
            <li v-for="item in arr">{{item}}</li>
        </ul>

    </div>
</body>
<script>

    // const { createApp } = Vue

    // const app = createApp({
    const app = Vue.createApp({
        data() {
            return {
                msg: '拼搏到无能为力，坚持到感动自己',
                htmlStr: '<h1 style="color: red">超大的标题</h1>',
                title: '一个大标题',
                className: 'box',
                styleStr: 'color: red',
                count: 100,
                flag: true,
                arr: [
                    '走一走',
                    '看一看',
                    '扭一扭',
                    '舔一舔',
                    '泡一泡',
                    '奥利奥'
                ]
            }
        },
    })

    app.mount('#app')
</script>

</html>